import { listCuesIndustry } from '@/services/api/api-cues-industry';
import { PageContainer } from '@ant-design/pro-components';
import { Badge, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import { useAccess } from 'umi';
import TableSubmit from './submit/TableSubmit';
import AddTopic from './topic/components/AddTopic';
import TableTopicAssist from './topic/table/TableTopicAssist';
import TableTopicManage from './topic/table/TableTopicManage';
import TableTopicMedia from './topic/table/TableTopicMedia';
import TableTopicRender from './topic/table/TableTopicRender';

type DetailsType = {
  id: string;
  name: string;
};

export default (): React.ReactNode => {
  const access = useAccess();

  const [tabActiveKey, setTabActiveKeyState] = useState<string>(
    access.线索征集x配置x管理员
      ? 'TableTopicRender'
      : access.线索征集x配置x部门需求者 || access.线索征集x配置x媒体需求者
      ? 'TableTopicMedia'
      : access.线索征集x配置x提供者
      ? 'TableTopicRender'
      : access.线索征集x配置x区县提供者
      ? 'TableTopicRender'
      : '',
  );

  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };

  const tabList = () => {
    if (access.线索征集x配置x管理员) {
      return [
        {
          tab: <span>选题计划{renderBadge(0, tabActiveKey === 'TableTopicRender')}</span>,
          key: 'TableTopicRender',
        },

        {
          tab: <span>选题审批{renderBadge(0, tabActiveKey === 'TableTopicManage')}</span>,
          key: 'TableTopicManage',
        },
        // {
        //   tab: <span>智能选题推荐{renderBadge(0, tabActiveKey === 'IntelligentRecommendation')}</span>,
        //   key: 'IntelligentRecommendation',
        // },
        {
          tab: '报送资源',
          key: 'TableSubmit',
        },
      ];
    } else if (access.线索征集x配置x部门需求者 || access.线索征集x配置x媒体需求者) {
      return [
        {
          tab: <span>我的选题计划{renderBadge(0, tabActiveKey === 'TableTopicMedia')}</span>,
          key: 'TableTopicMedia',
        },
        {
          tab: (
            <span>
              {access.线索征集x配置x部门需求者 ? '联动选题计划' : '协作选题计划'}
              {renderBadge(0, tabActiveKey === 'TableTopicAssist')}
            </span>
          ),
          key: 'TableTopicAssist',
        },
        // {
        //   tab: <span>智能选题推荐{renderBadge(0, tabActiveKey === 'IntelligentRecommendation')}</span>,
        //   key: 'IntelligentRecommendation',
        // },
        {
          tab: '报送资源',
          key: 'TableSubmit',
        },
      ];
    } else if (access.线索征集x配置x提供者) {
      return [
        {
          tab: <span>选题计划{renderBadge(0, tabActiveKey === 'TableTopicRender')}</span>,
          key: 'TableTopicRender',
        },
        {
          tab: <span>我的选题计划{renderBadge(0, tabActiveKey === 'TableTopicMedia')}</span>,
          key: 'TableTopicMedia',
        },
        {
          tab: <span>联动选题计划{renderBadge(0, tabActiveKey === 'TableTopicAssist')}</span>,
          key: 'TableTopicAssist',
        },
        // {
        //   tab: <span>智能选题推荐{renderBadge(0, tabActiveKey === 'IntelligentRecommendation')}</span>,
        //   key: 'IntelligentRecommendation',
        // },
        {
          tab: '报送资源',
          key: 'TableSubmit',
        },
      ];
    } else if (access.线索征集x配置x区县提供者) {
      return [
        {
          tab: <span>选题计划{renderBadge(0, tabActiveKey === 'TableTopicRender')}</span>,
          key: 'TableTopicRender',
        },
      ];
    } else {
      return [];
    }
  };

  /**
   * 行业
   */
  const [industryIds, setIndustryIdsState] = useState<any[]>([]);

  /**
   * 加载 行业 列表
   * @param key
   */
  const loadCuesIndustryData = async () => {
    try {
      const response = await listCuesIndustry();

      setIndustryIdsState(
        response.data.map((item) => {
          return { label: item.name, value: item.id };
        }),
      );
    } catch (error) {}
  };

  useEffect(() => {
    loadCuesIndustryData();
  }, []);

  const [loading, setLoadingState] = useState<boolean>(false);

  return (
    <PageContainer
      header={{
        title: false,
        breadcrumb: {
          items: [],
        },
        style: {
          paddingBlockEnd: 0,
        },
      }}
      tabProps={{
        style: {
          margin: 0,
        },
        tabBarGutter: 30,
      }}
      tabList={tabList()}
      tabActiveKey={tabActiveKey}
      tabBarExtraContent={{
        right: (
          <Space>
            {access.线索征集x创建选题计划 && (
              <AddTopic
                key="add_topic"
                onRefurbish={() => {
                  setLoadingState(true);
                }}
              />
            )}

            {/* {access.线索征集x创建选题计划 && <AssignAddress onRefurbish={function (): void {}} />} */}
            {/* {access.线索征集x配置x管理员 && <AssignCarbonCopy onRefurbish={function (): void {}} />} */}
          </Space>
        ),
        left: (
          <span
            style={{
              marginInlineEnd: '12px',
              color: 'rgba(0, 0, 0, 0.88)',
              fontWeight: 600,
              fontSize: 20,
              height: 48,
              paddingRight: 35,
              marginBottom: 10,
            }}
            title="选题管理"
          >
            选题管理
          </span>
        ),
      }}
      onTabChange={setTabActiveKeyState}
    >
      {tabActiveKey === 'TableTopicRender' ? (
        <TableTopicRender
          mode={1}
          loading={loading}
          industryIds={industryIds}
          onRefurbish={() => {
            setLoadingState(false);
          }}
        />
      ) : tabActiveKey === 'TableTopicManage' ? (
        <TableTopicManage
          mode={3}
          loading={loading}
          industryIds={industryIds}
          onRefurbish={() => {
            setLoadingState(false);
          }}
        />
      ) : tabActiveKey === 'TableTopicMedia' ? (
        <TableTopicMedia
          mode={2}
          loading={loading}
          industryIds={industryIds}
          onRefurbish={() => {
            setLoadingState(false);
          }}
        />
      ) : tabActiveKey === 'TableTopicAssist' ? (
        <TableTopicAssist
          mode={4}
          loading={false}
          industryIds={[]}
          onRefurbish={function (): void {}}
        />
      ) : (
        //  : tabActiveKey === 'IntelligentRecommendation' ? (
        //   <TableIntelligentRecommendation
        //   />
        // )
        <TableSubmit isEditable={false} />
      )}
    </PageContainer>
  );
};
